<template>
    <div>
        <h3>手动取本地数据</h3>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{students[0].id}}</td>
                    <td>{{students[0].name}}</td>
                    <td>{{students[0].age}}</td>
                </tr>
            </tbody>
        </table>
        <hr>
        <h3>循环取本地数据</h3>
        <table>
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in students">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
            </tbody>
        </table>
        <hr>
        <h3>循环取远程数据</h3>
        <!--这里需要加判断，因为在请求到数据之前vue已经尝试去根据sList对象去渲染页面了，而sList对象在ajax返回之前还是空的，会导致有错误-->
        <table v-if="sList.length>0">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in sList">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
            </tbody>
        </table>
        <hr>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "S",
        data(){
            return{
                msg:"Hello vue",
                students:[
                    {
                        name:'张三',
                        id:'aw8e49e8',
                        age:'21'
                    },
                    {
                        name:'李四',
                        id:'aw8e49e8',
                        age:'21'
                    }
                ],
                sList:[]
            }
        },
        created(){
            /*回调里面的“this”表示的是回调对象，而这里的this才是vue对象，回调里面不能直接拿到vue的this对象，所以在这里通过一个变量将vue的
            this对象带进去*/
            const _this=this;
            axios.get('http://localhost:8011/eurekaclient/student?start=0&pageSize=10').then(function (result) {
                //这里的result还不是我们的业务返回值，业务返回值是result.data
                _this.sList=result.data.data;
                console.log(JSON.stringify(result))
            })
        }
    }
</script>

<style scoped>

</style>